<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>车型情况-汽车商城</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/auto/favicon.ico" type="image/x-icon">
    <link
            href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
            rel="stylesheet">

    <link rel="stylesheet" href="/auto/Css/base.css">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/assets/css/animate.min.css">
    <link rel="stylesheet" href="/assets/css/jquery-ui.css">
    <link rel="stylesheet" href="/assets/css/slick.css">
    <link rel="stylesheet" href="/assets/css/chosen.min.css">
    <link rel="stylesheet" href="/assets/css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="/assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="/assets/css/lightbox.min.css">
    <link rel="stylesheet" href="/assets/js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="/assets/css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="/assets/css/mobile-menu.css">
    <link rel="stylesheet" href="/assets/fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="/assets/css/style.css">
    <script src="/admin/qrcode/jquery2.1.4.js"></script>
    <link rel="stylesheet" href="/auto/Css/lib.css">
    <link rel="stylesheet" href="/auto/Css/product.css">
    <link rel="stylesheet" href="/auto/Css/index.css">
    <script src="/admin/layer/layer.js"></script>
</head>

<body class="home">

<!-- top bar -->
<div class="top_bar">
    <div class="top_bar_con">
        <div class="top_bar_left">
            <img src="/auto/images/logo.png" alt="">
            <img src="/auto/images/slogan.svg" alt="">
        </div>
        <div class="top_bar_search clearfix">
            <form action="">
                <input type="text" class="search-input" name="keyword" placeholder="搜索品牌、车型等" id="search-input">
                <i class="fa fa-search "></i>
                <input type="submit" class="search-btn" value="搜索" bosszone="search">
            </form>
        </div>
        <div class="top_bar_right">
            <a href="/end/auto/index.html" class="active">首页</a>
            <a href="/end/auto/VehicleScre.html">选车</a>
            <a href="/end/auto/Personal.html" id="userCollect">我的收藏</a>
            <button id="loading">请登录</button>
            <a href="javascript:;" id="user"></a>
            <button id="loginOut">退出</button>
        </div>
    </div>
</div>


<div class="main-content main-content-details single no-sidebar">
    <div class="container">
        <div class="row">
            <div class="content-area content-details full-width ">
                <div class="site-main">
                    <div class="details-product">
                        <div class="details-thumd">
                            <div class="image-preview-container image-thick-box image_preview_container">
                                <img id="img_zoom" src="" alt="img">
                                <a href="#" class="btn-zoom open_qv"><i class="fa fa-search"
                                                                        aria-hidden="false"></i></a>
                            </div>
                            <div id="img">
                                <img id="img0" width="140" height="98" alt="">
                                <img id="img1" width="140" height="98" alt="">
                                <img id="img2" width="140" height="98" alt="">
                                <img id="img3" width="140" height="98" alt="">
                            </div>
                        </div>
                        <div class="details-infor" style="margin-top: 10px">
                            <div class="stars-rating">

                            </div>
                            <h1 id="autoName" class="product-title">
                            </h1>
                            <div id="model" class="availability">
                                车辆类型:
                                <select name="autoId" id="autoId" class="form-control" style="width: 250px">
                                </select>

                            </div>
                            <div class="price">
                                <span id="price"></span>
                            </div>
                            <div class="product-details-description">
                                <ul id="ul">
                                </ul>
                            </div>
                            <div class="variations">
                            </div>
                            <div class="group-button">
                                <div class="yith-wcwl-add-to-wishlist">
                                    <div class="yith-wcwl-add-button">
                                        <button id="subscribe" class="single_add_to_cart_button button">询问底价</button>
                                        <a id="collect"><img id="autoImg" src="/auto/images/shoucang.png"
                                                             style="width: 20px;height: auto"><p id="p" style="display: block;float: right;margin-top: 10px">添加收藏</p></a>
                                    </div>
                                </div>
                                <div class="size-chart-wrapp">
                                </div>
                                <div class="quantity-add-to-cart">

                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="tab-details-product">

                        <ul class="tab-link">
                            <li class="">
                                <a data-toggle="tab" aria-expanded="true" href="#information">参数配置 </a>
                            </li>
                        </ul>
                        <div class="tab-container">
                            <div id="information" class="tab-panel active">
                                <table id="table" class="table table-bordered">
                                    <tr>
                                        <td>帕萨特车型</td>
                                        <td>2022款 280TSI 精英版</td>
                                        <td>2022款 330TSI 精英版</td>
                                        <td>2022款 330TSI 星空豪华版</td>
                                        <td>2022款 330TSI 尊贵版</td>
                                        <td>2022款 380TSI 旗舰版</td>
                                    </tr>
                                    <tr>
                                        <td>价格</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>厂商</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>级别</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>发动机</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>最大功率</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>变速箱</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>车身结构</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>最高车速</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>最高车速</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="clear: left;"></div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="backtotop">
    <i class="fa fa-angle-double-up"></i>
</a>
<!-- 首页底部 -->
<div class="bottom_bar">
    <div class="custom_ser">
        <div class="custom_ser_main">
            <div>
                <span>周一至周五</span><br>
                <span>9:00-17:00</span>
            </div>
            <div>
                <h4>175-3012-3061</h4>
                <p>商城客服热线</p>
            </div>
            <div>
                <img src="/auto/images/1210339.png" alt="">
            </div>
            <div>
                <h3>扫码享权益</h3>
                <p>优惠随时掌握</p>
            </div>
        </div>
    </div>
    <div class="about_us">
        <div class="about_us_main">
            <ul>
                <li>
                    <a href="#">关于我们</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">隐私政策</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <a href="#">客服中心</a>
                </li>
            </ul>
            <br>
            <p>Copyright © 2021 - 2022 Car Shop. All Rights Reserved</p>
            <p>汽车商城 版权所有</p>
        </div>
    </div>
</div>
<!-- 登录页面 -->
<div class="land_page_back">
    <div class="land_page">
        <div class="land_page_con">
            <div class="land_page_top">
                <p>💁‍♂️ 密码登录</p>
                <a href="#" id="load_close">✕</a>
            </div>
            <div class="land_page_main">
                <input id="phone" placeholder="请输入手机号" type="tel" maxlength="50" autocomplete="tel" name="account"
                       value="">
                <input id="pas_input" placeholder="请输入密码" type="password" maxlength="50" autocomplete="tel"
                       name="account" value="">
                <img id="eye_img" src="/auto/images/close.png" alt="">
                <button type="button" id="login">登录</button>
            </div>
            <div class="land_page_bottom">
                <a href="#" id="click_register">没有账号？点击注册</a> <br>
                <p>登录即表示你同意<a href="#">用户协议</a>和<a href="#">隐私条款</a></p>
            </div>
        </div>
    </div>
    <div class="register">
        <div class="land_page">
            <div class="land_page_con">
                <div class="land_page_top">
                    <p>🙆‍♂️ 注册账号</p>
                    <!-- <a href="#" id="load_close">✕</a> -->
                </div>
                <div class="land_page_main register_main">
                    <input placeholder="请输入手机号" id="addPhone" type="tel" maxlength="50" autocomplete="tel"
                           name="account"
                           value="">
                    <input placeholder="请输入用户名" id="addName" type="tel" maxlength="50" autocomplete="tel" name="account"
                           value="">
                    <input id="pas1" placeholder="请输入密码" type="password" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <img id="eye1" src="/auto/images/close.png" alt="">
                    <input id="pas2" placeholder="确认密码" type="password" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <img id="eye2" src="/auto/images/close.png" alt="">
                    <label>
                        <p>注册即表示你同意<a href="#">用户协议</a>和<a href="#">隐私条款</a></p>
                    </label>
                    <button type="button" id="userAdd">点击注册</button>
                </div>
                <div class="land_page_bottom">
                    <a href="#" id="return_log">↺返回登录</a> <br>
                </div>
            </div>
        </div>
    </div>
    <!--/*@thymesVar id="auto" type=""*/-->
    <input id="msg" type="hidden" th:value="${auto}"/>
</div>


<script src="/auto/assets/js/jquery-1.12.4.min.js"></script>
<script src="/auto/assets/js/jquery.plugin-countdown.min.js"></script>
<script src="/auto/assets/js/jquery-countdown.min.js"></script>
<script src="/auto/assets/js/bootstrap.min.js"></script>
<script src="/auto/assets/js/owl.carousel.min.js"></script>
<script src="/auto/assets/js/magnific-popup.min.js"></script>
<script src="/auto/assets/js/isotope.min.js"></script>
<script src="/auto/assets/js/jquery.scrollbar.min.js"></script>
<script src="/auto/assets/js/jquery-ui.min.js"></script>
<script src="/auto/assets/js/mobile-menu.js"></script>
<script src="/auto/assets/js/chosen.min.js"></script>
<script src="/auto/assets/js/slick.js"></script>
<script src="/auto/assets/js/jquery.actual.min.js"></script>
<script src="/auto/assets/js/fancybox/source/jquery.fancybox.js"></script>
<script src="/auto/assets/js/lightbox.min.js"></script>
<script src="/auto/assets/js/owl.thumbs.min.js"></script>
<script src="/auto/assets/js/jquery.elevateZoom.min.js"></script>
<script src="/auto/assets/js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="/auto/assets/js/frontend-plugin.js"></script>
<script src="/auto/lib/jquery/1.11.3/jquery.min.js"></script>
<script src="/auto/lib/Swiper-3.4.2/js/swiper.js"></script>
<script src="/admin/qrcode/jquery2.1.4.js"></script>
<script src="/admin/layer/layer.js"></script>
<script>
    let list = null;

    function GetQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    $("#subscribe").click(function () {
        location.href = "/end/auto/reservePrice.html?id=" + GetQueryString("id");
    })

    $(function () {
        let id = GetQueryString("id");
        $.ajax({
            type: "POST",
            url: "/Views/queryByModel",
            data: {id: id},//主要是分页和多条件参数数据
            dataType: "json",
            success: function (data) {
                list = data;
                console.log(list)
                let str = null;
                for (let i = 0; i < data.length; i++) {
                    if (data[i].auto.used === 0) {
                        let obj = data[i];
                        str += '<option value="' + i + '">' + obj.auto.model + '</option>'
                        $("#autoId").html(str);
                    }
                }
                if (data[0].auto.utilityTime > 0) {
                    for (let i = 0; i < data[0].auto.utilityTime; i++) {
                        $("#img" + i).attr("src", "/assets/images/auto/" + data[0].auto.autoId + "/" + i + ".jpg");
                    }
                } else {
                    document.getElementById('img').innerHTML = "没有车辆内部图";
                }
                $("#img_zoom").attr("src", "/assets/images/auto/" + data[0].auto.picture);
                document.getElementById("autoName").innerHTML = data[0].auto.autoName;
                document.getElementById("price").innerHTML = "￥ " + data[0].auto.price;
                str =
                    '<li>引擎：' + data[0].auto.engine + '</li>' +
                    '<li>动力：' + data[0].auto.power + '</li>' +
                    '<li>上市时间：' + data[0].auto.timeMarket + '</li>' +
                    '<li>变速箱：' + data[0].auto.gearbox + '</li>' +
                    '<li>车身规格：' + data[0].auto.measure + '</li>' +
                    '<li>内饰：' + data[0].auto.bodyStuc + '</li>'
                ;
                $("#ul").html(str);
                let u1 = '<tr><td>' + data[0].firm + '车型</td>';
                let u2 = '<tr><td>价格</td>'
                let u3 = '<tr><td>能源类型</td>'
                let u4 = '<tr><td>级别</td>'
                let u5 = '<tr><td>上市时间</td>'
                let u6 = '<tr><td>发动机</td>'
                let u7 = '<tr><td>最大功率</td>'
                let u8 = '<tr><td>变速箱</td>'
                let u9 = '<tr><td>长x宽x高(mm)</td>'
                let u10 = '<tr><td>车身结构</td>'
                let u11 = '<tr><td>最高车速(km/h)</td>'
                let u12 = '<tr><td>整车保修期限</td>'
                for (let i = 0; i < data.length; i++) {
                    let auto = data[i].auto;
                    u1 += '<td>' + auto.model + '</td>';
                    u2 += '<td>' + auto.price + '</td>';
                    u3 += '<td>' + auto.energy + '</td>';
                    u4 += '<td>' + auto.ran + '</td>';
                    u5 += '<td>' + auto.timeMarket + '</td>';
                    u6 += '<td>' + auto.engine + '</td>';
                    u7 += '<td>' + auto.power + '</td>';
                    u8 += '<td>' + auto.gearbox + '</td>';
                    u9 += '<td>' + auto.measure + '</td>';
                    u10 += '<td>' + auto.bodyStuc + '</td>';
                    u11 += '<td>' + auto.km + '</td>';
                    u12 += '<td>' + auto.term + '</td>';
                }
                u1 += '</tr>';
                u2 += '</tr>';
                u3 += '</tr>';
                u4 += '</tr>';
                u5 += '</tr>';
                u6 += '</tr>';
                u7 += '</tr>';
                u8 += '</tr>';
                u9 += '</tr>';
                u10 += '</tr>';
                u11 += '</tr>';
                u12 += '</tr>';
                let table = u1 + u2 + u3 + u4 + u5 + u6 + u7 + u8 + u9 + u10 + u11 + u12;
                $("#table").html(table)
            }
        });
    })
    $("#autoId").change(function () {
        let i = $("#autoId").val()
        $("#img_zoom").attr("src", "/assets/images/auto/" + list[i].auto.picture);
        document.getElementById("autoName").innerHTML = list[i].auto.autoName;
        document.getElementById("price").innerHTML = "￥ " + list[i].auto.price;
        let str =
            '<li>引擎：' + list[i].auto.engine + '</li>' +
            '<li>动力：' + list[i].auto.power + '</li>' +
            '<li>上市时间：' + list[i].auto.timeMarket + '</li>' +
            '<li>变速箱：' + list[i].auto.gearbox + '</li>' +
            '<li>车身规格：' + list[i].auto.measure + '</li>' +
            '<li>内饰：' + list[i].auto.bodyStuc + '</li>'
        ;
        $("#ul").html(str);
        if (list[i].auto.utilityTime > 0) {
            for (let a = 0; a < list[i].auto.utilityTime; a++) {
                $("#img" + a).attr("src", "/assets/images/auto/" + list[i].auto.autoId + "/" + a + ".jpg");
            }
        } else {
            document.getElementById('img').innerHTML = "没有车辆内部图";
        }
    })
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',

        loop: true,
        autoplay: 2000,
        autoplayDisableOnInteraction: false,


        // 如果需要分页器
        pagination: '.swiper-pagination',
        paginationClickable: true,

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

        // 如果需要滚动条
        //   scrollbar: '.swiper-scrollbar',
    })
</script>
<!-- 登录 -->
<script>
    var load = document.querySelector('.top_bar .top_bar_right #loading');
    var closePage = document.getElementById('load_close');

    var land_page = document.querySelector('.land_page_back');
    var reg_btn = document.getElementById('click_register');
    var login_page = document.querySelector('.land_page_back .land_page');
    var registerPage = document.querySelector('.land_page_back .register');
    var return_log = document.getElementById('return_log');
    console.log(load, closePage, land_page, reg_btn, login_page);
    load.onclick = function () {
        land_page.style.display = 'block';
    }
    closePage.onclick = function () {
        land_page.style.display = 'none';
    }
    reg_btn.onclick = function () {
        login_page.style.display = 'none';
        registerPage.style.display = 'block';
    }
    return_log.onclick = function () {
        login_page.style.display = 'block';
        registerPage.style.display = 'none';
    }

    // 控制密码是否可见
    // 登录 一个
    let eyeImg = document.getElementById('eye_img');
    let pasInput = document.getElementById('pas_input');

    let flag = false;
    eyeImg.onclick = function () {
        flag = !flag;
        if (flag) {
            eyeImg.src = '/auto/images/open.png';
            pasInput.type = 'text';
        } else {
            eyeImg.src = '/auto/images/close.png';
            pasInput.type = 'password';
        }
    }

    // 注册两个
    let eye1 = document.getElementById('eye1');
    let pas1 = document.getElementById('pas1');

    let flag1 = false;
    eye1.onclick = function () {
        flag1 = !flag1;
        if (flag1) {
            eye1.src = '/auto/images/open.png';
            pas1.type = 'text';
        } else {
            eye1.src = '/auto/images/close.png';
            pas1.type = 'password';
        }
    }

    let eye2 = document.getElementById('eye2');
    let pas2 = document.getElementById('pas2');

    let flag2 = false;
    eye2.onclick = function () {
        flag2 = !flag2;
        if (flag2) {
            eye2.src = '/auto/images/open.png';
            pas2.type = 'text';
        } else {
            eye2.src = '/auto/images/close.png';
            pas2.type = 'password';
        }
    }

    let login = document.getElementById('login');
    let userAdd = document.getElementById('userAdd');
    let loginOut = document.getElementById('loginOut');
    let i = 0;
    //判断是否登录
    $(function () {
        $.ajax({
            type: "POST",
            url: "/Login/LoginBy",
            data: "",
            dataType: "json",
            success: function (data) {
                if (data.code === 200) {
                    $("#loading").hide();
                    let id = GetQueryString("id");
                    $.ajax({
                        type: "post",
                        url: "/User/queryCollect",
                        data: {autoId: id},
                        dataType: "json",
                        success: function (data) {
                            if (data.code === 200) {
                                i = 2
                                $("#autoImg").prop('src', '/auto/images/shoucangafter.png');
                                $('#p').html('已收藏');
                            }
                        }
                    })
                    i = 1;
                    $("#user").html(data.obj.userName);
                } else {
                    $("#loginOut").hide();
                    $("#userCollect").hide();
                }
            }
        })
    })

    //登录
    login.onclick = function () {
        let phone = $("#phone").val();
        let password = $("#pas_input").val();
        var windowId = layer.load()
        $.ajax({
            type: "POST",
            url: "/Login/userLogin",
            data: {phone: phone, password: password},//主要是分页和多条件参数数据
            dataType: "json",
            success: function (data) {
                //关闭弹窗
                layer.close(windowId);
                //显示结果和跳转页面
                layer.msg(data.msg)
                if (data.code === 200) {
                    location.reload()
                }
            }
        })
    }

    //注册
    userAdd.onclick = function () {
        let addName = $("#addName").val();
        let addPhone = $("#addPhone").val();
        let pwd1 = $("#pas1").val();
        let pwd2 = $("#pas2").val();
        if (pwd1 !== pwd2 || pwd1 === null || pwd2 === null) {
            alert("两次密码不匹配，或密码为空了");
        } else if (addName === null) {
            alert("用户名不能为空！")
        } else if (addPhone === null) {
            alert("手机号不能为空！")
        } else {
            $.ajax({
                type: "POST",
                url: "/Views/userAdd",
                data: {phone: addPhone, userName: addName, passWord: pwd1},
                dataType: "json",
                success: function (data) {
                    if (data.code === 200) {
                        alert("注册成功,请登录")
                        location.reload(true);
                    } else if (data.code === 500) {
                        alert(data.msg);
                    } else {
                        alert(data.msg);
                    }
                }
            })
        }
    }

    loginOut.onclick = function () {
        $.ajax({
            type: "post",
            url: "/Login/userLogout",
            data: "",
            dataType: "json",
            success: function (data) {
                alert(data.msg);
                location.reload()
            }
        })
    }

    function GetQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //判断用户是否收藏
    //收藏车辆
    $("#collect").click(function () {
        let id = GetQueryString("id")
        if (i === 1) {
            $.ajax({
                type: "post",
                url: "/User/addCollect",
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    alert(data.msg)
                    if (data.code===200){
                        $("#autoImg").prop('src', '/auto/images/shoucangafter.png');
                        $('#p').html('已收藏');
                        i=2;
                    }
                }
            })
        } else if (i === 2) {
            console.log(i)
            $.ajax({
                type: "post",
                url: "/User/delCollect",
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    if (data.code===200){
                        layer.msg(data.msg)
                        $("#autoImg").prop('src', '/auto/images/shoucang.png');
                        $('#p').html('添加收藏');
                        i=1;
                    }
                }
            })
        } else {
            layer.msg("请先登录");
        }
    })
</script>
</body>

</html>